================================================================================
  WINBON
  Two versions, no judge: a coherent multi-page HTML template.
  By Luko Karavan · https://www.lukokaravan.com/digiluko
================================================================================

  (To reuse this README for another template, only the template name "Winbon" and the page list need changing - the rest applies to every template.)


WHAT THIS IS
--------------------------------------------------------------------------------
Not a single page - a small design SYSTEM applied across page types, so the whole site feels like one hand made it. Plain HTML, CSS and JavaScript: no build step, no framework, no npm. Open a file in a browser and it works.

The entire look is driven by CSS custom properties ("tokens"). Change a handful of variables and the whole template re-skins - colours, records, fog, spacing, type, all of it. A ready-made dark ("blue hour") and light ("printout") variant ship together.

Four ideas carry it: two EQUAL accents (glass and sodium - neither is primary, neither means "wrong"), every surface is a RECORD (a header with a sequence number, a time, a fingerprint), nothing is ever deleted (disabled, archived and old things share one "inactive branch" state), and depth is made of translucent fog, not glow or shadows.

Winbon is drawn from a real place in a real text: the city on the Danube in "Version Conflict", a short story from Luko Karavan's Antihistor cycle - in English at https://antihistor.substack.com/p/version-conflict


WHAT'S INCLUDED
--------------------------------------------------------------------------------
  index.html             Landing / homepage (runtime dark-light switch, so no -light twin).
  generic.html           The kitchen sink: every element and component in one place.
  blog.html              Blog index: newspaper masthead, featured record, filter, grid, archive as an inactive branch.
  blogpost.html          One entry: reading bar, contents rail, share rail, twin record, log, revisions, discussion.
  portfolio.html         Incident-register portfolio: case book with a peek, case file (before / after), contact sheet.
  shop.html              Optional commerce set: catalogue with filter + real sort, live mini-cart drawer.
  product.html           One product: gallery, variants, quantity, two editions side by side, reviews, sticky add bar.
  cart.html              Full cart: quantities, save for later, free-delivery meter, summary.
  legal.html             One reusable legal document (terms, privacy, cookies, imprint...).
  404.html               A lean error page - the page moved to an inactive branch.
                         Every page except index.html has a -light twin (e.g. blog-light.html). The shop trio is optional - delete the three pages and css/shop|product|cart.css if you do not sell anything.
  css/
    tokens.css           Design tokens - DARK theme  (the re-skin layer).
    tokens-light.css     Design tokens - LIGHT theme (same variable names).
    base.css             Reset, fonts, typography, rich-text elements.
    layout.css           Page skeleton: header / nav / main / footer, branch rail, lift, fog.
    components.css       Reusable UI: records, the twin, the inactive branch, buttons, entries, cards, gallery, forms...
    landing.css          index.html only.
    blog.css             blog.html + blogpost.html.
    portfolio.css        portfolio.html.
    shop.css             shop.html + product.html + cart.html (e-shop chrome, product card).
    product.css          product.html.
    cart.css             cart.html.
    legal.css            legal.html.
    print.css            PORTABLE: paper/PDF adapter (linked media="print" on every page).
    code.css             PORTABLE: syntax-highlight theme (Prism / highlight.js).
    epub.css             PORTABLE: EPUB stylesheet (pandoc ... --css css/epub.css).
  themes/
    winbon.marp.css      PORTABLE: Marp / reveal slide theme.
  tokens/
    winbon.tokens.json   PORTABLE: design tokens in DTCG format (Figma / Style Dictionary), generated from the CSS tokens.
  js/
    main.js              All interactivity (vanilla JS, numbered independent blocks).
  assets/
    img/scenes/          Sample images (webp) - the drawn scenes of Winbon, rendered.
    img/cover/           The template cover.
    img/mockups/         Previews of the specimen documents (used on the landing).
    icons/fav/           Favicons, web app manifest, social share image.
    samples/             Specimen docs (PPTX / XLSX / DOCX / PDF / EPUB, dark & light).
  README.txt, LICENSE.txt, STYLE-GUIDE.md, humans.txt

  PORTABLE IDENTITY: the same tokens drive more than the web. Each "PORTABLE" file above is a thin adapter for another surface (print, slides, EPUB, code, Figma). Bring your own tool - no converter ships in this package.

  "generic.html" is the kitchen-sink page: it shows every element and component in one place - the best starting point to see what's available. STYLE-GUIDE.md is the short design brief: palette, type, records, the twin, and what not to do.


QUICK START
--------------------------------------------------------------------------------
  1. Open generic.html in a browser to explore everything on offer.
  2. Copy a page, swap in your own text and images, and you're building.
  3. Light theme: in the page's <head>, change the stylesheet link css/tokens.css -> css/tokens-light.css. That single swap is the ONLY difference between dark and light; base.css, layout.css and components.css are shared and theme-agnostic. (index.html carries both palettes and switches at runtime.)


MAKING IT YOURS
--------------------------------------------------------------------------------
  • Colours / records / fog / spacing / fonts:  edit css/tokens.css (and the light mirror). You rarely need to touch the other CSS files.
  • Fonts are loaded from Google Fonts (a <link> in each page's <head>): IBM Plex Sans, Public Sans, JetBrains Mono. Swap the families there and update --font-* in the tokens.
  • Section labels number themselves (SEQ 01, SEQ 02 ...) - add or remove sections freely; give a label the class section-label--plain to keep it out of the count.
  • Images are .webp inside a drawn "scene" frame: drop your own picture into the same <img>, and if a file is ever missing the drawn panel shows through instead of a broken icon. For photographs, the optional .duotone class ties them to the palette. Update the favicons in assets/icons/fav/ too.
  • The canonical links are relative (and index.html points at the template's page on the author's site): set your own URLs when you publish.
  • Each CSS/JS file opens with a table of contents and clearly-marked sections; interactive parts note which JavaScript block drives them.


BROWSER SUPPORT
--------------------------------------------------------------------------------
Modern evergreen browsers (Chrome, Edge, Firefox, Safari). Uses current CSS (custom properties, clamp(), color-mix(), masks, backdrop-filter, :has(), :user-valid). No Internet Explorer support. Everything respects prefers-reduced-motion: the fog, the tube and the diode stand still.


CREDIT
--------------------------------------------------------------------------------
Free to use, including commercially. The only ask: keep a visible credit link in your footer -

  Design: Winbon by Luko Karavan - https://www.lukokaravan.com/digiluko

See LICENSE.txt for the full terms (and notes on sample content and the third-party fonts / Fancybox lightbox).


--------------------------------------------------------------------------------
  Made by Luko Karavan - https://www.lukokaravan.com/digiluko
  More templates and tools: DigiLuko. The story behind Winbon: https://antihistor.substack.com
--------------------------------------------------------------------------------
